import React from 'react';
import './style.css';
// event
import emitter from '../../util/events';
// service
import { getPictureData } from '../../util/service';
// and
import { Input, Card, Icon } from 'antd';
const Search = Input.Search;

export default class SelectPictrue extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            pictureData: [],
            selectData: []
        }
    }

    componentDidMount(){
        getPictureData()
            .then(response => {
                this.setState({
                    pictureData: response.Data
                })
            })
        emitter.once('submitModal', () => {
            emitter.emit('selectPicture', this.state.selectData)
            this.setState({
                selectData: []
            })
            let elements = document.querySelectorAll('.contentPictrue [data-type="checked"]');
            for(let i = 0; i < elements.length; i++) {
                elements[i].dataset.type = 'unchecked';
            }
        })
    }

    CardGridClick = (e) => {
        let value = e._targetInst.return.memoizedProps.value;
        let selectData = this.state.selectData;
        let element = document.querySelector('.contentPictrue [value="'+value+'"]');
        let boolean = true;
        for(let i=0; i < this.state.selectData.length; i++) {
            if(this.state.selectData[i].Id === value) {
                boolean = false;
                break;
            }
        }
        if(boolean) {
            element.dataset.type = 'checked';
            selectData.push(this.state.pictureData.filter(el => el.Id === value)[0])
        } else {
            element.dataset.type = 'unchecked';
            selectData = selectData.filter(el => el.Id !== value);
        }
        this.setState({
            selectData: selectData
        })
    }

    removePicture = (e) => {
        let value = e._targetInst.stateNode.parentNode.getAttribute('value');
        let selectData = this.state.selectData;
        let element = document.querySelector('.contentPictrue [value="'+value+'"]');
        element.dataset.type = 'unchecked';
        selectData = selectData.filter(el => el.Id !== value);
        this.setState({
            selectData: selectData
        })
    }

    render() {
        const selectEle = this.state.selectData.map((el, index) => {
            return (
                <Card.Grid
                    key={index}
                    value={el.Id}
                    style={{
                        width: '20%', 
                        textAlign: 'center',
                        padding: '10px'
                    }}>
                    <img alt={el.Name} src={el.Thumbnail} />
                    <p>{el.Name}</p>
                    <Icon type="close" value={el.Id} onClick={this.removePicture} />
                </Card.Grid>
            )
        })

        const pictureEle = this.state.pictureData.map((el, index) => {
            return (
                <Card.Grid
                    key={index}
                    value={el.Id}
                    onClick={this.CardGridClick}
                    style={{
                        width: '20%', 
                        textAlign: 'center',
                        padding: '10px'
                    }}>
                    <img alt={el.Name} src={el.Thumbnail} />
                    <p>{el.Name}</p>
                </Card.Grid>
            )
        })

        return (
            <div>
                <Search
                    placeholder="请输入"
                    onSearch={value => console.log(value)}
                    enterButton
                />
                
                <Card title="已选图片" className="selectPictrue">
                    {selectEle}
                </Card>

                <Card title="图片" className="contentPictrue">
                    {pictureEle}
                </Card>
            </div>
        )
    }
}